import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button, Select, TreeSelect, DatePicker, Checkbox, message, Dropdown, Menu, Icon } from 'antd'
import _ from 'lodash'
import moment from 'moment'

import Ajax from 'lib/Ajax'
import { addConfig } from 'actions/config'
import { getNewTreeData, findRowData, getNameByCode, confirmDelete } from 'lib/fun'

const FormItem = Form.Item;
const SelectTreeNode = TreeSelect.TreeNode;
const Option = Select.Option;
const { RangePicker } = DatePicker;

class Filter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [],
      areaId: ""
    }
  }

  componentDidMount(){
    // this.loadArea();
  }

  componentWillReceiveProps(nextProps){
    if(!nextProps.visible){
      // this.props.form.resetFields();
    }else{
      // if(nextProps.common.user&&nextProps.common.user.user&&this.state.treeData.length == 0){
      //   this.loadArea();
      // }
    }
  }

  handleSearch = (e) => {
    var self = this;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if(err == null){
        self.props.handleFilter(values);
        self.setState({
          areaId: values.areaId
        });
      }
    });
  }

  handleAll = (e) => {
    var self = this;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if(err == null){
        self.props.handleFilter(values, true);
      }
    });
  }

  areaChange = (value)=>{
    var self = this;
    this.props.form.validateFields((err, values) => {
      self.props.areaChange(Object.assign(values, {
        areaId: value
      }));
      self.setState({
        areaId: value
      });
    });
  }

  handleReset = () => {
    this.props.form.resetFields();
  }

  getButtonText = ()=>{
    const { type } = this.props;
    var back = '导出当前所有用户'
    if(type == 2){
      back = "选中当前所有用户"
    }else if(type == 3){
      back = "新增当前所有用户"
    }
    return back
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const formItemLayout2 = {
      labelCol: { span: 16 },
      wrapperCol: { span: 8 },
    };
    
    return (<div className="ant-advanced-search-form">
          <Row>
            <Col span={8}>
              <FormItem {...formItemLayout} label="区划名称">
                {getFieldDecorator("areaId",{
                  rules: [{
                    required: true, message: '请选择区划名称'
                  }]
                })(
                  <Select
                    size="default"
                    dropdownMatchSelectWidth={false}
                    onChange={this.areaChange}
                  >
                    {
                      (this.props.treeData||[]).map(function(obj){
                        return (<Option key={obj.areaId+""} value={ obj.areaId+"" }>{ obj.areaName }</Option>)
                      })
                    }
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem {...formItemLayout} label="用户姓名">
                {getFieldDecorator("name")(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem {...formItemLayout} label="身份证">
                {getFieldDecorator("identNumber")(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col span={4}>
              <FormItem {...formItemLayout2} label="是否户主">
                {getFieldDecorator("master", {
                  valuePropName: 'checked'
                })(
                  <Checkbox />
                )}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <div className="btn-box" style={{ textAlign: 'center' }}>
                <Button type="primary" onClick={this.handleSearch}>查询</Button>
                <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                  重置
                </Button>
                <span style={{float:'right'}}>
                  <Button type="primary" disabled={ !(!!this.state.areaId&&this.props.num) }  onClick={this.handleAll}>{this.getButtonText()}</Button>
                </span>
              </div>
            </Col>
          </Row>
        </div>);
  }
}


module.exports = Form.create()(Filter)